<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="bootstrap.min.css" />
		<style>
			html,body{
				height: 100%;
				margin:0  10px;
			}
			#template{
				display: none;
			}
			#mask{
				position: fixed;
				background: rgba(0,0,0,0.5);
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			#popup{
				width: 600px;
				padding: 30px;
				background: #fff;
				border-radius: 20px;
				position: fixed;
				top: 50%;
				z-index: 1;
				left: 50%;
				transform: translate(-50%,-50%);
				display: none;
			}
			#popup1 p{
				font-size: 20px;
				text-align: center;
				padding-top: 50px;
				padding-bottom: 30px;
			}
			#popup1{
				box-sizing: border-box;
				text-align: center;
				width: 450px;
				height: 200px;
				background: #fff;
				border-radius: 5px;
				position: fixed;
				top:50%;
				left: 50%;
				transform: translate(-50%,-50%);
				display: none;
			}
			#close{
				position:absolute;
				top:5px;
				right:15px;
				color:#999;
				font-size: 24px;
				cursor:pointer;
				transition:all .5s;
			}
			#close:hover{
				transform: rotate(90deg);
			}
			#outlogin{
				text-decoration: none;
				background: blanchedalmond;
				width: 60px;
				height: 50px;
				font-size: 20px;
				margin-left: 10px;
				border: 1px solid #000;
			}
			h3{
				width: 300px;
				height: 50px;
				background: #eee;
				border: 1px solid #999999;
				border-radius: 5px;
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<h3>用户：<span id="username"></span><a href="/login.html"  id="outlogin">[退出登录]</a></h3>
		<div style="float: right;margin-right: 15px;margin-top: 15px;">
			<button class="btn btn-primary" id="popupshow">+添加学生</button>
		</div>

		<table class="table">
			<thead>
				<tr>
					<th>ID</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>所在城市</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr id="template" class="tdList">
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td>
						<button class="btn btn-danger delete">删除学生</button>
						<button class="btn btn-primary change">修改信息</button>
					</td>
				</tr>
			</tbody>
		</table>

		<div id="popup">
			<span id="close"> × </span>
			<div class="form-group">
				<label for="newName">姓名</label>
				<input type="text" class="form-control" id="newName" placeholder="请输入学生姓名">
			</div>
			<div class="form-group">
				<label for="newAge">年龄</label>
				<input type="number" class="form-control" id="newAge" placeholder="请输入学生年龄">
			</div>
			<div class="form-group">
				<label for="newCity">所在城市</label>
				<select name="" id="province"></select>
				<select name="" id="city"></select>
				<select name="" id="area"></select>
			</div>
			<div class="form-group">
				<label class="radio-inline">
					<input type="radio" name="sex" id="boy" value="option1">男
				</label>
				<label class="radio-inline">
					<input type="radio" name="sex" id="girl" value="option2" checked="checked">女
				</label>
			</div>
			<button class="btn btn-primary" id="send">确认提交</button>
			<button class="btn btn-default" id="cancel">取消</button>
			
		</div>
		<div id="mask"></div>
		<div id="popup1">
			<p>您确定要删除嘛？此过程不可逆！！</p>
		    <button class="btn btn-danger" id="confirmDelete1">确认删除</button>
		    <button class="btn btn-default" id="confirmCancel1">取消</button>
		</div>
		
		<script src="citys.js"></script>
		<script src="jquery.min.js"></script>
		<script src="common.js"></script>
		<script>
			//只有在登录的情况下才可以跳转到该页面并每次退出登录后再次访问该页面需要继续登录
			// 检测用户是否登录
			let username = sessionStorage.getItem("username");
			// 如果没有登录数据，就拜拜
			if(!username){
				location.href = `${url}/login.html`
			}
			$("#username").html(username)
			
			
			// 点击退出登录，清空一切数据
			$("#outlogin").click(()=>{
				sessionStorage.clear();
			})
			
			
			//【1】jquery发送jsonp请求
			$.ajax({
				url:`${url}/getData`,
				success(data){
					var data = JSON.parse(data);
					data.forEach(item=>{
						let newItem = $("#template").clone(true);
						newItem.appendTo($(".table tbody")).attr("id","")
						newItem.find("td").eq(0).html(item.id)
						newItem.find("td").eq(1).html(item.name)
						newItem.find("td").eq(2).html(item.sex?"男":"女")
						newItem.find("td").eq(3).html(item.age)
						newItem.find("td").eq(4).html(item.city)
						
					})
				}
			})
			
			//【2】删除功能
			//给删除按钮绑定单击事件
			//单击删除按钮后使其遮罩层和删除选择框先渐显；然后给确认删除按钮绑定单击事件，使前端向后端发送Ajax请求，当前端接受到后端返回的数据并
			//将其删除后使其遮罩层和删除选择框先渐隐；给取消按钮绑定单击事件，使其遮罩层和删除选择框先渐隐；
			$(".delete").click(function(){
				$("#mask").fadeIn()
				$("#popup1").fadeIn()
				$("#confirmDelete1").click(() =>{
					$.ajax({
							data:{
								id:$(this).closest("tr").find("td").eq(0).html()
							},
							url:`${url}/delete`,
							success(data){
								if(data === "success"){
									history.go(0)
								}
								else{
									alert("删除操作失败")
								}
							}
						});
					$("#mask").fadeOut()
					$("#popup1").fadeOut()
				})
				$("#confirmCancel1").click(function(){
					$("#mask").fadeOut()
					$("#popup1").fadeOut()
				})
			})
			
			
			// 【3】添加功能和城市输入判断
			//3.1 所在地区判断及其引入
			let province = $("#province");
			let city = $("#city");
			let area = $("#area");
			
			// 初始化省市区下拉菜单部分
			$(()=>{
				citys.forEach(item=>{
					let option = $(`<option>${item.provinceName}</option>`)
					province.append(option)
				})
				citys[0].mallCityList.forEach(item => {
					let option = $(`<option>${item.cityName}</option>`)
					city.append(option)
				})
				citys[0].mallCityList[0].mallAreaList.forEach(item => {
					let option = $(`<option>${item.areaName}</option>`)
					area.append(option)
				})
			})
			
			
			//省改变
			province.change(function(){
				// 先清空原来的数据
				city.empty();
				area.empty();
				// selectedIndex返回下拉选择菜单的当前选中的那个option的下标
				cityList = citys[this.selectedIndex].mallCityList;
				// 更新市中的选择项
				cityList.forEach(item=>{
					let option = $(`<option>${item.cityName}</option>`)
					city.append(option)
				})
				// 更新区中的选择项
				cityList[0].mallAreaList.forEach(item=>{
					let option = $(`<option>${item.areaName}</option>`)
					area.append(option)
				})
			})
			//市改变
			city.change(function(){
				// 先清空原来的数据
				area.empty();
				let areaList = cityList[this.selectedIndex].mallAreaList;
				// 更新区中的选择项
				areaList.forEach(item=>{
					let option = $(`<option>${item.areaName}</option>`)
					area.append(option)
				})
			})
			
			//3.2 给添加学生按钮绑定单击事件，使其单击时弹出遮罩层和输入信息框
			//3.2.1 给确认添加按钮绑定单击事件
			//3.2.2 单击确认按钮后使其向后端发送ajax请求
			$("#popupshow").click(function(){
				$("#mask").fadeIn()
				$("#popup").fadeIn()
				$("#send").click(function(){
					$.ajax({
						url:`${url}/addData`,
						data:{
							name:$("#newName").val(),
							age:$("#newAge").val(),
							city:province.val() + city.val() + area.val(),
							sex:$("#boy")[0].checked ? 1 : 0
						},
						success(data){
							if(data === "success"){
								alert("添加成功")
								history.go(0)
							}
							else{
								alert("添加失败")
							}
						}
					})
					$("#mask").fadeOut();
					$("#popup").fadeOut();
				})
			})
			//3.3 给取消按钮绑定单击事件，单击时使其遮罩层和输入信息框渐隐
			$("#cancel").click(function(){
				$("#mask").fadeOut();
				$("#popup").fadeOut();
			})
			//3.4 给关闭按钮 x 绑定单击事件，单击时使其遮罩层和输入信息框渐隐
			$("#close").click(function(){
				$("#mask").fadeOut();
				$("#popup").fadeOut();
			})
			

			//【4】修改信息
			$(".change").click(function(){
				$("#mask").fadeIn()
				$("#popup").fadeIn()
				$("#newName").val($(this).closest("tr").find("td").eq(1).html())
				$(this).closest("tr").find("td").eq(2).html() === "男" ? $("#boy")[0].checked = "checked" : $("#girl")[0].checked = "checked";
				// $(this).closest("tr").find("td").eq(2).html() === "男" ? $("#boy").prop("checked",true) : $("#girl").prop("checked",true)
				$("#newAge").val($(this).closest("tr").find("td").eq(3).html())
				
				//修改完信息之后向后端发送jsonp请求
				//注意this指向问题
				$("#send").click(()=>{
					$.ajax({
						url:`${url}/change`,
						data:{
							id:$(this).closest("tr").find("td").eq(0).html(),
							name:$("#newName").val(),
							age:$("#newAge").val(),
							city:province.val() + city.val() + area.val(),
							sex:$("#boy")[0].checked ? 1 : 0
						},
						success(data){
							if(data === "success"){
								alert("修改成功")
								history.go(0)
							}
							else{
								alert("修改失败")
							}
						}
					})	
				})
			})
				
			
		</script>
		
	</body>
</html>

